<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2021-07-11 陈亮 12:36-</title>
    <link rel="stylesheet" href="./liang.css">
    <style>
        .nav {
            margin: 20px;
            width: 200px;
            text-align: center;
            cursor: pointer;
        }

        .province .title {
            background-color: darkcyan;
            color: white;
            height: 30px;
            line-height: 30px;
        }

        .province>.city {
            display: none;
        }

        .province>.city>li {
            height: 30px;
            line-height: 30px;
            background-color: rgb(152, 243, 243);
            position: relative;
        }

        .province>.city>li:hover {
            background-color: rgb(63, 133, 133);
        }

        .province>.city>li:hover>.district {
            display: block;
        }

        .province>.city>li>.district {
            position: absolute;
            width: 200px;
            background-color: rgb(51, 71, 71);
            left: 200px;
            top: 0;
            display: none;
        }
    </style>
</head>

<body>
    <div class="nav">

    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
        let provinces = []
        $.get(`./3city.json`, function (res) {
            provinces = res.filter(r => r.pid === 0)
            provinces.forEach(p => {
                p.citys = res.filter(r => r.pid === p.id)
                p.citys.forEach(f => {
                    f.districts = res.filter(r => r.pid === f.id)
                })
            });
            showData(provinces)
        })

        function showData(provinces) {
            provinces.forEach(p => {
                let province = $(`<div class="province">`)
            let title = $(`<div class="title">`)
                title.html(p.name)
                province.append(title)
                let citys = $(`<ul class="city">`)
                p.citys.forEach(c => {
                    let li_city = $(`<li>`)
                    let div_city = $(`<div>`)
                    div_city.html(c.name)
                    li_city.append(div_city)
                    let ul_dis = $(`<ul class="district">`)
                    c.districts.forEach(d => {
                        let lii_dis = $(`<li>`)
                        lii_dis.html(d.name)
                        ul_dis.append(lii_dis)
                    })
                    li_city.append(ul_dis )
                    citys.append(li_city)
                })
                province.append(citys)
                $(`.nav`).append(province)
            })
        }
        $(`.nav`).on(`click`, `.title`, function () {
            $(this).next(`.city`).slideToggle(500)
        })

    </script>
</body>

</html>